/* eslint-disable react/no-array-index-key */
import React from 'react';
import { Avatar, Row } from 'antd';

export default function ExperienceDescription({
    avatar,
    icon,
    major = [],
    secondary,
    description,
    size = 56,
    extra = '',
    showAvatar = true
}) {
    const gap = 12;
    const renderMajor = () => {
        const [first = '--', ...rest] = major;
        return (
            <Row type="flex" justify="space-between">
                <span style={{ color: 'rgba(0, 0, 0, 0.85)', fontWeight: 500 }}>{first}</span>
                {rest.map((item, index) => {
                    if (!item) {
                        return '';
                    }
                    return (
                        <span key={index} style={{ color: 'rgba(0, 0, 0, 0.45)', fontWeight: 400, fontSize: '12px' }}>
                            {item}
                        </span>
                    );
                })}
            </Row>
        );
    };
    const renderSecondary = () => {
        if (!secondary) {
            return '';
        }
        const [first, second] = secondary;
        return (
            <Row type="flex" justify="space-between">
                <span style={{ color: 'rgba(0, 0, 0, 0.65)', fontWeight: 400 }}>{first}</span>
                {second && <span style={{ color: 'rgba(0, 0, 0, 0.65)', fontWeight: 400 }}>{second}</span>}
            </Row>
        );
    };
    const renderDesc = () => {
        if (!description || !description.length) {
            return '';
        }
        const wrapperStyle = {
            marginLeft: showAvatar ? gap + size : gap,
            fontWeight: 400,
            color: 'rgba(0, 0, 0, 0.25)',
            marginTop: 8
        };
        return (
            <div style={wrapperStyle}>
                {description.map((desc, index) => {
                    const { title, content } = desc;
                    if (!content || !content.length) {
                        return '';
                    }
                    return (
                        <div key={index}>
                            {index !== 0 && <div style={{ marginTop: 32 }}></div>}
                            <div>
                                {title && <div style={{ marginBottom: 8 }}>{title}</div>}
                                {content.map((con, conIndex) => (
                                    <div key={conIndex}>{con}</div>
                                ))}
                            </div>
                        </div>
                    );
                })}
            </div>
        );
    };
    return (
        <>
            <Row type="flex" align="stretch">
                {showAvatar && (
                    <Avatar
                        shape="square"
                        style={{ background: 'rgba(248, 249, 248)' }}
                        size={size}
                        src={avatar}
                        icon={icon}
                    ></Avatar>
                )}
                <div
                    style={{
                        display: 'flex',
                        flexFlow: 'column',
                        justifyContent: 'space-between',
                        flex: 1,
                        marginLeft: gap
                    }}
                >
                    {renderMajor()}
                    {renderSecondary()}
                </div>
            </Row>
            {extra && (
                <div style={{ marginLeft: showAvatar ? gap + size : gap, marginTop: 14, marginBottom: 24 }}>
                    {extra}
                </div>
            )}
            {renderDesc()}
        </>
    );
}
